<template>
  <div class="type-select">
    <div class="type-select-box">
      <mu-select v-model="choose.root" label="题型大类" full-width class="input-low-padding">
        <mu-option
          v-for="item in rootOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></mu-option>
      </mu-select>
      <mu-select v-model="choose.secondary" label="题型小类" full-width class="input-low-padding">
        <mu-option
          v-for="item in secondaryOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></mu-option>
      </mu-select>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'TypeSelect',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      choose: {
        root: 0,
        secondary: 0
      }
    }
  },
  computed: {
    ...mapGetters({
      types: 'types'
    }),
    rootTypes() {
      return this.types.filter(it => it.parent_type_id === 0)
    },
    secondaryTypes() {
      const rootIds = this.rootTypes.map(it => it.id)
      return this.types.filter(it => rootIds.indexOf(it.parent_type_id) >= 0)
    },
    rootOptions() {
      const options = this.rootTypes.map(it => ({
        value: it.id,
        label: it.type_name
      }))
      options.unshift({
        value: 0,
        label: '不选择'
      })
      return options
    },
    secondaryOptions() {
      const options = this.secondaryTypes
        .filter(it => it.parent_type_id === this.choose.root)
        .map(it => ({
          value: it.id,
          label: it.type_name
        }))
      options.unshift({
        value: 0,
        label: '不选择'
      })
      return options
    },
    finalType() {
      if (this.choose.root === 0) {
        return null
      } else {
        if (this.choose.secondary === 0) {
          return this.rootTypes.find(it => it.id === this.choose.root)
        } else {
          return this.secondaryTypes.find(it => it.id === this.choose.secondary)
        }
      }
    }
  },
  watch: {
    choose() {
      const secondaryId = this.choose.secondary
      const secondaryOption = this.secondaryOptions.find(it => it.value === secondaryId)
      if (!secondaryOption) {
        this.choose.secondary = 0
      }
    },
    finalType(val) {
      if (val) {
        this.$emit('input', val.id)
      } else {
        this.$emit('input', 0)
      }
    },
    value(val) {
      this.setChooseFromId(val)
    }
  },
  created() {
    this.setChooseFromId(this.value)
  },
  methods: {
    setChooseFromId(id) {
      const type = this.types.find(it => it.id === id)
      const choose = {
        root: 0,
        secondary: 0
      }
      if (type) {
        if (type.parent_type_id === 0) {
          choose.root = type.id
          choose.secondary = 0
        } else {
          choose.root = type.parent_type_id
          choose.secondary = type.id
        }
      } else {
        choose.root = 0
        choose.secondary = 0
      }
      this.choose = { ...choose }
    }
  }
}
</script>

<style scoped>
.type-select-box {
  display: flex;
}
.is-phone .type-select-box {
  display: block;
}
</style>
